<!doctype html>
<html>
<head>
<title>无标题文档</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
<link rel="stylesheet" type="text/css" href="css/libs/CSSRESET.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/course_detail.css">
<script src="js/libs/jquery-2.1.3.min.js"></script>
<script>
    $(function(){	
        
        //显示全部 内容
        $(".a_show").on("click",function(){
            $(".b_content").css({"height":"auto","overflow":"auto"});
            $(this).fadeOut();
        });
        
        //评分
		$(".p_mark").each(function(index, element) {
			var _index=parseInt($(this).attr("data-value"));
			$(this).find("span:lt("+(_index)+")").addClass("active");
        });

    });
</script>
</head>
<body>
    <article class="wrapper">
        <div class="main">	
           
            <div class="open">
                <div class="o_wrap">
                    <div><img src="img/icon_cface.png" alt="" /></div>
                    <div>
                        <h5>外教君</h5>
                        <p>寓教于乐，伴你成长</p>
                    </div>
                    <div><a href="javascript:;">立即打开</a></div>
                </div>
            </div>
            <!-- open -->
            
            <div class="cbanner">
                <img src="img/course_banner.jpg" alt="" />
                <p>Wonderful world, bring you a taste of <br/>European and American style!</p>
            </div>
            <!-- cbanner -->
            
            <div class="tinfo">
                <div>
                    <img src="img/icon_profile_1.png" alt="" />
                    <span></span>
                </div>
                
                <div data-value="3">
                    <h5>Peny</h5>
                    <p>30分钟    <span>|</span>154人听过</p>
                </div>
                
                <div>
                    <h5>5.0</h5>
                    综合评分
                </div>
            </div>
            <!-- tinfo -->
            
            <div class="brief">
                <h3 class="cm_h3">简介</h3>
                <div class="b_content">
                    <p>See the Statue of Liberty, saw her, then you see New York, see the United States.</p>
                    <p>So she quietly watched, recording millions of immigrants across the ocean to the history of the United States. Usually, the way to visit the Statue of Libert...</p> 
                    <p>See the Statue of Liberty, saw her, then you see New York, see the United States.</p>
                    <p>So she quietly watched, recording millions of immigrants across the ocean to the history of the United States. Usually, the way to visit the Statue of Libert...</p> 
                </div>
                <a href="javascript:;" class="a_show"><span>显示全部</span></a>
            </div>
            <!-- brief -->
            
            <div class="ctable">
                <h3 class="cm_h3">简介</h3>
                <ul class="ul_clist">
                    <li>
                        <a href="javascript:;">从零开始学，上学的好处是什么 </a>
                        <span>15:36</span>
                    </li>
                    
                    <li>
                        <a href="javascript:;">从零开始学，上学的好处是什么 </a>
                        <span>15:36</span>
                    </li>
                    
                    <li>
                        <a href="javascript:;">从零开始学，上学的好处是什么 </a>
                        <span>15:36</span>
                    </li>
                    
                    <li>
                        <a href="javascript:;">从零开始学，上学的好处是什么 </a>
                        <span>15:36</span>
                    </li>
                </ul>
            </div>
            <!-- ctable -->
            
            <div class="mark">
                <h3 class="cm_h3">学生评价</h3>
                
                <ul class="ul_mark">
                    <li>
                        <div class="div_mark">
                            <div><img src="img/icon_profile_1.png" alt="" /></div>
                            <div>
                                <h5>Peny</h5>
                                <p>2016-02-26 21:15</p>
                            </div>
                            <div data-value="3">
                                <p class="p_mark" data-value="5"><span></span><span></span><span></span><span></span><span></span></p>
                            </div>
                        </div>
                        <p></p>
                    </li>
                    
                    <li>
                        <div class="div_mark">
                            <div><img src="img/icon_profile_1.png" alt="" /></div>
                            <div>
                                <h5>Peny</h5>
                                <p>2016-02-26 21:15</p>
                            </div>
                            <div data-value="3">
                                <p class="p_mark" data-value="5"><span></span><span></span><span></span><span></span><span></span></p>
                            </div>
                        </div>
                        <p>WOW,amazing!</p>
                    </li>
                    
                    <li>
                        <div class="div_mark">
                            <div><img src="img/icon_profile_1.png" alt="" /></div>
                            <div>
                                <h5>Peny</h5>
                                <p>2016-02-26 21:15</p>
                            </div>
                            <div data-value="3">
                                <p class="p_mark" data-value="5"><span></span><span></span><span></span><span></span><span></span></p>
                            </div>
                        </div>
                        <p>WOW,amazing!</p>
                    </li>

                </ul>
            </div>
            <!-- mark -->
        </div>
    </article>
    
    <footer class="footer">
        <a href="javascript:;"><span>试听</span></a>
        <a href="javascript:;"><span>￥298</span>参与</a>
    </footer>
</body>
</html>
